<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">
	<h:head>
		<h:outputStylesheet name="/notice.css" library="/css" />
		<h:outputStylesheet>
			.even-row {
			    background-color: #FCFFFE;
			}
			 
			.odd-row {
			    background-color: #ECF3FE;
			}
			 
			.active-row {
			    background-color: #FFEBDA !important;
			    cursor: pointer;
			}
		</h:outputStylesheet>
		
	</h:head>
	<h:body>
		<h:form>
		<div style="width: 1224px">
			<div id="title_Notice" style="width: 960px; float: left; height: 70px">
				<div style="width: 100%;height: 40px;background:url(resources/images/bg_thongtin.jpg) repeat-x left top;">
				<h:panelGrid style="font-family: cambria;font-size: 18px;font-weight: bold;color: white;" columns="2">
					<h:graphicImage url="/resources/images/icon_tt.png"
						style="margin: 0px 5px 0px 5px; padding: 0px;"></h:graphicImage>
					<h:outputLabel value="Mục thông tin" style="margin: 0px; padding: 0px;"></h:outputLabel>
				</h:panelGrid>
				</div>
				<h:panelGrid style="width:960px; height: 40px; border: 2px solid #67a8f1;" >
					<h:outputLabel style="backgroud-color: #f2f4f2;"
						value="Mục thông tin sẽ hướng dẫn sử dụng những thông tin giúp đỡ cho việc bán hàng."/>
				</h:panelGrid>
			</div>
			<div id="tabsNotice" style="width: 960px; float: left; margin: 20px 0px 10px 0px;">
				<div id="button_tabs" style="border-bottom: 3px solid #6383d4;height: 32px; position: inherit;">
					<h:panelGrid columns="6">
						<input type="submit" class="button" value="Tất Cả Thông Báo"/>
						<a4j:commandButton styleClass="button" value="Thông Tin Chung"/>
						<a4j:commandButton styleClass="button" value="TT Giao Dịch An Toàn"/>
						<a4j:commandButton styleClass="button" value="Danh Mục Thông Báo"/>
						<a4j:commandButton styleClass="button" value="Thông Tin Quảng Cáo"/>
						<a4j:commandButton styleClass="button" value="Thông Tin Hệ Thống"/>
					</h:panelGrid>
				</div>
				<div id="ContactNotice" style="width: 960px; float: left; margin: 20px 0px 10px 0px;">
					<h:form>
						<rich:extendedDataTable value="#{beanNotice.lstNotice}" var="cap"
			                selection="#{NoticeSelection.selection}" id="table"
			                frozenColumns="1" style="height:300px; width:960px;" selectionMode="single">
			            <a4j:ajax execute="@form" event="selectionchange"
			                listener="#{NoticeSelection.selectionListener}" render=":res" />
			
							<rich:column sortBy="#{cap.noticeId}" sortable="true" id="noticeId" width="100px"
										sortIconAscending="dataTableAscIcon" sortIconDescending="dataTableDescIcon">
				                <f:facet name="header">
				                    <h:outputText value="Số" style="color: white" />
				                </f:facet>
				                <h:outputText value="#{cap.noticeId}"/>
				            </rich:column>
				            
				            <rich:column sortBy="#{cap.typenotice}" sortable="true" id="typenotice" width="150px"
										sortIconAscending="dataTableAscIcon" sortIconDescending="dataTableDescIcon">
				                <f:facet name="header">
				                    <h:outputText value="Loại Thông báo" style="color: white" />
				                </f:facet>
				                <h:outputText value="#{cap.typenotice}"/>
				            </rich:column>
				            
				            <rich:column sortBy="#{cap.title}" sortable="true" id="title" width="550px"
										sortIconAscending="dataTableAscIcon" sortIconDescending="dataTableDescIcon">
				                <f:facet name="header">
				                    <h:outputText value="Tiêu đề" style="color: white" />
				                </f:facet>
				                <h:outputText value="#{cap.title}"/>
				            </rich:column>
				            
				            <rich:column sortBy="#{cap.dateNotice}" sortable="true" id="dateNotice" width="150px"
										sortIconAscending="dataTableAscIcon" sortIconDescending="dataTableDescIcon">
				                <f:facet name="header">
				                    <h:outputText value="Ngày" style="color: white" />
				                </f:facet>
				                <h:outputText value="#{cap.dateNotice}"/>
				            </rich:column>
						
						</rich:extendedDataTable>
					</h:form>
				</div>
				<div id="ContentNotice" style="float: left;">
					<a4j:outputPanel id="res">
			            <rich:panel header="Content of Notice selection:"
			                rendered="#{not empty NoticeSelection.selectionItems}" style="width:960px; margin-top: 10px">
			                <rich:list type="unordered"
			                    value="#{NoticeSelection.selectionItems}" var="sel">
			                    <h:outputText value="Tiêu đề: #{sel.title}" style="font-size: 14px; font-weight: bold;"/>
			                    <br/>
			                    <h:outputText value="#{sel.contentNotice}"/>
			                </rich:list>
			            </rich:panel>
			        </a4j:outputPanel>
				</div>
			</div>
		</div>
		</h:form>
	</h:body>
</html>

